<template>
  <div class="map_box" id="map_view"></div>
</template>


<script>
import { loadModules, loadCss } from 'esri-loader'
import Point from '@arcgis/core/geometry/Point'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import Graphic from '@arcgis/core/Graphic'
import Query from '@arcgis/core/rest/support/Query'
import value from '../assets/pipelines.json'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
import { useStore } from 'vuex'
import BasemapToggle from '@arcgis/core/widgets/BasemapToggle'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
const map = new Map({
  basemap: 'streets-vector'
})
let mapView = null
export default {
  name: 'Map',
  computed: {
    currentPipelineId() {
      return this.store.getters.currentPipelineId
    }
  },
  watch: {
    currentPipelineId(newVal, oldVal) {
      this.addPipeLineToMap(newVal)
    }
  },
  data() {
    return {
      store: useStore(),
      arcMap: null,
      arcMapView: null
    }
  },
  methods: {
    //修改地图的中心点
    changeLocation(long, lat, zoom) {
      mapView.center = new Point({
        x: long,
        y: lat,
        spatialReference: {
          wkid: 4326 // wkid 2027
        }
      })
      //设置缩放级别
      mapView.zoom = zoom
    },

    highLightPipeline() {},

    addPipeLineToMap(pipelineId) {
      //通过管段ID 获取干线中的所有管段
      const pipelines = value
      //将管线在地图中标出来
      let gLayer = new GraphicsLayer({
        title: 'polyline'
      })
      for (let pipeline of pipelines) {
        console.log(pipeline)
        let line = {
          type: 'polyline',
          paths: pipeline.coordinate,
          spatialReference: mapView.spatialReference
        }
        let lineGraphic = new Graphic({
          geometry: line,
          symbol: {
            type: 'simple-line',
            color: [4, 90, 141],
            width: 4,
            cap: 'round',
            join: 'round'
          },
          attributes: {
            name: pipeline.name,
            pipelineId: pipeline.id,
            start: pipeline.start,
            end: pipeline.end,
            length: pipeline.length,
            crack: pipeline.crack,
            corrode: pipeline.corrode
          }
        })
        gLayer.graphics.add(lineGraphic)
      }
      map.add(gLayer)
      mapView.on('click', function (event) {
        mapView.hitTest(event).then(function (response) {
          console.log(response)
        })
      })
    }
  },
  mounted() {
    //加载css文件
    let that = this
    loadCss('/arcgis/library/4.11/esri/css/main.css')
    mapView = new MapView({
      container: 'map_view',
      map: map,
      zoom: 8,
      center: [104.072044, 30.663776],
      popup: {
        defaultPopupTemplateEnabled: true
      }
    })
    mapView.ui.components = []
    // setTimeout(function (){
    //   that.store.commit("changeCurrentPipeLineId",567);
    // },5000)
    // that.addPipeLineToMap(123)

    //切换base地图
    // let toggle = new BasemapToggle({
    //   view: mapView,
    //   nextBasemap: "satellite",
    // });
    // mapView.ui.add(toggle)

    const fl = new FeatureLayer({
      url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3'
    })
    map.add(fl)
  }
}
</script>

<style scoped>
@import 'https://js.arcgis.com/4.23/esri/themes/dark/main.css';
.map_box {
  height: 100%;
  width: 100%;
}
</style>
